<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			<!-- 添加信息 -->
			<template v-if="type=='add'">
				<view class="body">
					<view class="form-wrap m-b2"> 
						<view class="form-item">
							<view class="label">姓 名：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.realname" placeholder="输入真实姓名" />
								</view>
							</view>
						</view>

						<view class="form-item">
							<view class="label">性 别：</view>
							<picker class="form-picker" mode="selector" :range="sexs.data" range-key="name" @change="changeSex">
								<view class="picker">
									<input type="text" class="select-data t-l" v-model="sexs.select_name"
										placeholder="选择性别" disabled>
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
										
									</view>
								</view>
							</picker>
						</view>
						
						<view class="form-item">
							<view class="label">出生日期：</view>
							<picker class="form-picker" mode="date" @change="changeDate">
								<view class="picker">
									<input type="text" class="select-data t-l" v-model="params.birthday"
										placeholder="选择出生日期" disabled>
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</picker>
						</view> 
						
					</view>

					<!-- 图片上传 -->
					<view class="form-wrap m-b2">
						<view class="upload-pic-item">
							<view class="label">个人免冠照:</view>
							<view class="form-upload-pic">
								<template v-if="params.files.length>0">
									<view v-for="(item,index) in params.files" :key="index" class="img-item" >
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="previewPic">
											<image class="img" :src="item.url" mode="widthFix"></image>
										</view>
										<view class="del-icon" @click="delPic">
											<view class="iconfont">&#xe74b;</view>
										</view>
										<view v-if="item.status==0" class="loading-img">
											<div class="loading-icon loader-18"></div>
										</view> 	 
									</view>
								</template>
								<view v-else class="img-item add-btn" @click="showPopup('show','isPhototab')">
									<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</template>
			
			<!-- 编辑信息 -->
			<template v-if="type=='edit'">
				<template v-if="loadingState.loading">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<view v-else class="body">
					<view class="form-wrap m-b2"> 
						<view class="form-item">
							<view class="label">姓 名：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.realname" placeholder="输入真实姓名" />
								</view>
							</view>
						</view>
			
						<view class="form-item">
							<view class="label">性 别：</view>
							<picker class="form-picker" mode="selector" :range="sexs.data" range-key="name" @change="changeSex">
								<view class="picker">
									<input type="text" class="select-data t-l" v-model="sexs.select_name"
										placeholder="选择性别" disabled>
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</picker>
						</view>
						
						<view class="form-item">
							<view class="label">出生日期：</view>
							<picker class="form-picker" mode="date" @change="changeDate">
								<view class="picker">
									<input type="text" class="select-data t-l" v-model="params.birthday"
										placeholder="选择出生日期" disabled>
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</picker>
						</view> 
						
					</view>
			
					<!-- 图片上传 -->
					<view class="form-wrap m-b2">
						<view class="upload-pic-item">
							<view class="label">个人免冠照:</view>
							<view class="form-upload-pic">
								<template v-if="params.files.length>0">
									<view v-for="(item,index) in params.files" :key="index" class="img-item" >
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="previewPic">
											<image class="img" :src="item.url?item.url:img_path+item.file_path" mode="widthFix"></image>
										</view>
										<view class="del-icon" @click="delPic">
											<view class="iconfont">&#xe74b;</view>
										</view>
										<view v-if="item.status==0" class="loading-img">
											<div class="loading-icon loader-18"></div>
										</view> 	 
									</view>
								</template>
								<view v-else class="img-item add-btn" @click="showPopup('show','isPhototab')">
									<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
								</view>
								 
							</view>
						</view>
					</view>
			
				</view>
			</template>
			
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="submit">提交</view>
				</view>
			</view>

			<view v-if="flag.isFullPage" class="full-fix-page bottom-btn-wrap">
				<view v-if="flag.isPhototab" class="bottom-tab-btn a-fadeinB">
					<view class="bottom-lay-btn-wrap m-b2">
						<view class="lay-btn" @click="uploadImage">从相册选择</view>
						<navigator open-type="navigate" hover-class="none" url="/package_member/certificateCamera/certificateCamera" class="lay-btn">拍照</navigator>
					</view>
					<view class="bottom-lay-btn-wrap m-b2">
						<view class="lay-btn" @click="showPopup('hide')">取消</view> 
					</view> 
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { 
		uploadImage,
		previewImage,
		uploadToServe, 
	} from '@/common/util.js'   
	import {img_path} from '@/config.js'
	import loading from '@/components/loading-more.vue'
	export default {
		name: 'name',
		data() {
			return {
				type:'',
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo: uni.getStorageSync('userInfo'),
				isStop: true,
				loadingState:{
					loading:true
				},
				flag:{
					isFullPage:false,
					isPhototab:false
				},
				sexs: {
					select_name:'男',
					data:[
						{
							id:1,
							name:'男'
						},
						{
							id:2,
							name:'女'
						}
					]
				},  
				params: {
					id:'',
					realname: '',
					sex: '1',
					birthday: '',
					headpic: '',
					files:[]
				},
				img_path:img_path
			}


		},
		async onLoad(params) {  
			this.type=params.type;
			this.isLogin = await this.$loginState('check'); 
			 
			if(this.isLogin){
				this.getCertificateInfo();
			}
			  
		},
		async onShow() {
			 

		},
		onHide() {
			this.showPopup('hide');
		},
		onUnload() {
			this.showPopup('hide');
		},
		 
		methods: {
			
			// 获取证书详情
			getCertificateInfo:async function(){
				// 已有领取资格  判断是否已领取证书
				let res=await this.$api.yfk_api.certificateInfo(); 	   
				if(res.data.ret==1&&res.data.data.isaudit==2){
					this.loadingState.loading=false;
					this.sexs.data.forEach(item=>{
						if(item.id==res.data.data.sex){							
							this.sexs.select_name=item.name;
						}
					})  
					this.params.id=res.data.data.id;
					this.params.realname=res.data.data.realname;
					this.params.birthday=res.data.data.birthday;
					this.params.sex=res.data.data.sex;
					let file_item={};
					file_item.file_name=res.data.data.headpic.split('.')[1];
					file_item.file_path=res.data.data.headpic;
					file_item.status=1;
					this.params.files.push(file_item); 
				} 
			},
			
			// 选择性别
			changeSex:function(e){  
				let idx=e.detail.value;
				this.sexs.select_name=this.sexs.data[idx].name;
				this.params.sex=this.sexs.data[idx].id;
			},
			
			// 选择生日
			changeDate:function(e){ 
				this.params.birthday=e.detail.value;
			},
			
			// 上传图片
			uploadImage: function() {  
				let _this = this;
				uploadImage({
					length: _this.params.files.length,
					maxSize: 1, 
					sourceType:['album'],
					success(res) {  
						let params_data = {};
						params_data.status = 0;
						params_data.url = res.tempFilePaths[0];
						_this.params.files.push(params_data); 
						uploadToServe({
							url: '/yfk/upload-file',
							filePath: res.tempFilePaths[0],
							name: 'photo',
							formData: {
								'p_id': 0,
								'uid': _this.userInfo.id
							}
						}).then((up_res) => {   
							if (up_res.ret == 0) {								
								params_data.file_name = up_res.data.file_name;
								params_data.file_path = up_res.data.file_path;
								params_data.file_type = up_res.data.file_type;
								params_data.status = up_res.data.status;
								params_data.type = up_res.data.type; 	
								
								
							}
						}).catch((err)=>{ 
						})
					}
				})
				
			},
			
			// 预览图片
			previewPic: function() {
				let _this = this;
				let preview_data = [];
				this.params.files.forEach(item => {
					preview_data.push(item.url);
				})
				
				previewImage({
					data: preview_data,
					index: 0
				})
			},
			
			// 删除图片
			delPic:async function() {				
				let res=await this.$api.ycj_api.deletefile({
					file_path:this.params.files[0].file_path
				}) 
				this.params.files.splice(0, 1);			
			},		
			
			submit:async function(){
				let _this=this;
				// if(this.params.realname==''){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入真实姓名',
				// 		mask: true,
				// 		duration: 1000
				// 	})
				// 	return
				// }
				
				if(this.params.birthday==''){
					uni.showToast({
						icon: 'none',
						title: '请选择出生日期',
						mask: true,
						duration: 1000
					})
					return
				}
				
				if(this.params.files.length==0){
					uni.showToast({
						icon: 'none',
						title: '请上传个人免冠照',
						mask: true,
						duration: 1000
					})
					return
				}
				
				uni.showModal({
					content:'信息审核通过后，将不能在修改，信息确定无误吗？',
					confirmText:'确定',
					async success(m_res) {
						if(m_res.confirm){
							if(_this.isStop){
								_this.isStop=false; 
								if(_this.type=='add'){
									let res=await _this.$api.yfk_api.addCertificate({
										realname:_this.params.realname,
										sex:_this.params.sex,
										birthday:_this.params.birthday,
										headpic:_this.params.files[0].file_path
									})
									if(res.data.ret==0){
										uni.showToast({
											icon: 'success',
											title: '提交成功',
											mask: true,
											duration: 1000,
											success() {
												setTimeout(()=>{
													_this.isStop=true;
													_this.$store.commit('UPDATE_CERTIFICATE',1);
													uni.navigateBack({
														delta:1
													})
												},300)
											}
										})
									}else{
										setTimeout(()=>{
											_this.isStop=true;
										},300)
									}
								}else if(_this.type=='edit'){
									let res=await _this.$api.yfk_api.editCertificate({
										id:_this.params.id,
										realname:_this.params.realname,
										sex:_this.params.sex,
										birthday:_this.params.birthday,
										headpic:_this.params.files[0].file_path
									}) 
									if(res.data.ret==1){
										uni.showToast({
											icon: 'success',
											title: '提交成功',
											mask: true,
											duration: 1000,
											success() {
												setTimeout(()=>{
													_this.isStop=true;
													_this.$store.commit('UPDATE_CERTIFICATE',1);
													uni.navigateBack({
														delta:1
													})
												},300)
											}
										})
									}else{
										setTimeout(()=>{
											_this.isStop=true;
										},300)
									}
								}
								
							}
						}
					}
				})
				
				
			},
			
			// 打开弹窗
			showPopup:function(t,n){
				if(t=='show'){
					this.flag.isFullPage=true;
					this.flag[n]=true;
				}else if(t=='hide'){
					for(let i in this.flag){
						this.flag[i]=false;
					}
				}
			}, 
		
		},
		components: {
			loading
		},

		computed:{
			certificatePhoto_update(){
				return this.$store.state.certificatePhoto_update;
			}
		},
		watch:{
			certificatePhoto_update(newer,older){ 
				if(newer!=older){
					this.params.files.push(JSON.parse(newer)); 
				}
			}
		},

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}

	.status {
		padding: 0 20rpx;
		color: #f00;
		font-size: 28rpx;
	}

	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	.prev-btn {
		text-align: right;
		padding: 20rpx;

		text {
			padding: 4rpx 15rpx;
			background: #ff9600;
			border-radius: 8rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.prev-data {
		padding: 18rpx 10rpx;
		background: #f5f5f5;
		text-align: right;
		color: #999;
		font-size: 28rpx;

		.val {
			color: #333;
		}

		.use-btn {
			color: #d03c30;
		}
	}
</style>
